<template>
  <div>
    <div class="box" style="display: flex; justify-content: space-between">
      <div class="header-left">
        <div>
          <span class="yotpo">yotpo.</span>
        </div>

        <div class="headerjs">进思教育有限责任公司</div>
        <div class="header-input" style="position: relative">
          <!-- <el-input class="inp" v-model="input"></el-input> -->
          <input
            style="
              width: 220px;
              height: 25px;
              border-radius: 5px;
              border: 1px solid #fff;
            "
            class="ip"
            type="text"
          />
          <span
            style="
              width: 1px;
              height: 16px;
              background: #fff;
              position: absolute;
              top: 25px;
              right: 125px;
            "
          ></span>
          <img
            src=""
            style="position: absolute; top: 25px; right: 105px"
            alt=""
          />
          <span style="color: #fff; margin-left: 30px">下午好</span>
        </div>
      </div>
      <div class="header-right">
        <img
          src=""
          alt=""
          style="width: 20px; height: 20px; margin-right: 20px"
        />
        <img
          src=""
          alt=""
          style="width: 20px; height: 20px; margin-right: 20px"
        />
        <img
          src=""
          alt=""
          style="width: 30px; height: 30px; margin-right: 20px"
        />
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.header-left {
  display: flex;

  .yotpo {
    background: rgb(37, 103, 255);
    // height: 30px;
    color: #fff;
    font-weight: bold;
  }

  .headerjs {
    color: #fff;
  }

  .header-input {
    width: 340px;
    height: 25px;
    margin-left: 100px;

    .ip {
      width: 220px;
      height: 25px;
      background-color: rgb(115, 120, 138);
    }
  }
}
</style>